<template>
  <el-checkbox-group v-model="activepcs">
    <el-tree
      :data="treedatas"
      :default-expanded-keys="expandedkeys"
      node-key="id"
      :props="defaultProps"
      @node-click="pcstap"
    >
      <template #default="{ data }">
        <div
          class="el-tree-node__label"
          style="display: flex; flex: 1; justify-content: space-between"
        >
          <!-- @click="pcstap(data)" -->
          <span>{{ data.pcs }}</span>
          <div @click.stop.native>
            <el-checkbox :label="data.id" size="medium">&nbsp;</el-checkbox>
          </div>
        </div>
      </template>
    </el-tree>
  </el-checkbox-group>
</template>
<script>
  export default {
    props: {
      pcsid: {
        type: String,
        default: '',
      },
      expandedkeys: {
        type: Array,
        default: () => {
          return []
        },
      },
      searchdata: {
        type: Array,
        default: () => {
          return []
        },
      },
    },
    data() {
      return {
        loading: false,
        treedatas: [],
        defaultProps: {
          children: 'children',
          label: 'pcs',
        },
        station: [],
        activepcs: [],
        utopcs: [],

        showdata: {},
        utopcsdata: [],
      }
    },
    watch: {
      activepcs(n, o) {
        if (n.length - o.length == 1 || n.length - o.length == -1) {
          n = new Set(n)
          o = new Set(o)
          let differencen = [...n].filter((x) => !o.has(x))
          let differenceo = [...o].filter((x) => !n.has(x))

          let difference = differencen.concat(differenceo)
          if (difference.length != 1) {
            return
          }
          let pcs = this.$z.pcschildren(this.station, difference[0])
          pcs = this.pcszkfn(pcs)
          pcs = new Set(pcs)
          if (differencen.length == 1) {
            let activepcs = new Set([...this.activepcs, ...pcs])
            this.activepcs = [...activepcs]
          } else {
            let activepcs = new Set(
              [...this.activepcs].filter((x) => !pcs.has(x))
            )
            this.activepcs = [...activepcs]
          }
        }
      },
    },
    created() {
      this.show()
    },
    methods: {
      pcstap(data) {
        let hasindex = this.activepcs.findIndex(function (e) {
          return e == data.id
        })
        if (hasindex >= 0) {
          this.activepcs.splice(hasindex, 1)
        } else {
          this.activepcs.push(data.id)
        }
      },
      async updatafn() {
        this.loading = true
        let activepcs = this.utopcs.map((e) => {
          return e.id
        })
        let UToPcsadd = this.activepcs.filter((e) => {
          return !activepcs.find((f) => {
            return e == f
          })
        })
        let UToPcsdel = activepcs.filter((e) => {
          return !this.activepcs.find((f) => {
            return e == f
          })
        })
        UToPcsdel = this.utopcsdata
          .filter((e) => {
            return UToPcsdel.find((f) => {
              return f == e.pcs
            })
          })
          .map((e) => {
            return e.id
          })
        let reqs = []
        UToPcsadd.forEach((e) => {
          reqs.push(
            this.$z.request.post('/UToPcsadd', {
              uUser: this.showdata.uUser,
              pcs: e,
            })
          )
        })
        UToPcsdel.forEach((e) => {
          reqs.push(
            this.$z.request.post('/UToPcsdel', {
              uUser: this.showdata.uUser,
              id: e,
            })
          )
        })
        await Promise.all(reqs)
        if (reqs.length != 0) {
          this.$message.success({
            message: '操作成功',
            type: 'success',
          })
        }
        this.loading = false
        this.show({ ...this.showdata })
      },
      pcszkfn(datas) {
        let ids = []
        datas.forEach((e) => {
          ids.push(e.id)
          ids = ids.concat(this.pcszkfn(e.children))
        })
        return ids
      },
      async show(data) {
        this.showdata = data
        let pcs = await this.$store.dispatch('stationnew/getstation')
        this.station = this.$z.deepClone(pcs)
        pcs = this.$z.pcschildren(pcs)
        this.treedatas = pcs
        this.activepcs = this.pcsid
          .split(',')
          .filter((e) => {
            return e != ''
          })
          .map((e) => {
            return Number(e)
          })
      },
      getCurrentNode() {
        return { id: this.activepcs.join() }
      },
    },
  }
</script>
